import React from 'react'
import styled from 'styled-components'
import { px2rem } from '@/assets/global-style'

export const Wrapper=styled.div`
    position: fixed;
    left: 50%;
    bottom: ${px2rem(20)};
    transform: translate(-50%, -50%);
    .wrap{
        height:27.5px;
        width: 47.5px;
        position: relative;
        background: url('https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/88449163354e406484af81fadc0608da~tplv-k3u1fbpfcp-watermark.image?') 50% 50% no-repeat; 
        /* background: url('https://m.mafengwo.cn/favicon.ico') 50% 50% no-repeat;  */
        background-size: auto 59.5px;
    }
    .common{
        position: absolute;
        height: 100%;
        width: 100%;
        overflow: hidden;
        left:0;

    }
    .common:before{
        content:'';
        position: absolute;
        background: url('https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/88449163354e406484af81fadc0608da~tplv-k3u1fbpfcp-watermark.image?') 50% 50% no-repeat; 
        /* background:url('https://m.mafengwo.cn/favicon.ico') 50% 50% no-repeat; */
        background-size: auto 55px;
        width: 47.5px;
        height: 55px;
    }
    .left{
        transform: rotate(60deg);
    }
    .left:before{
        transform: rotate(-60deg) translate(12px,-7px);
    }
    .right{
        transform: rotate(-60deg);
    }
    .right:before{
         transform: rotate(60deg) translate(12px,7px);
         bottom: 0;
    }
`

const Logo = () => {
  return (
    <Wrapper>
      <div className='wrap' onClick={() => alert("正在开发中，敬请期待:)")}>
        <div className='left common'></div>
        <div className='right common'></div>
    </div>
    </Wrapper>
  )
}

export default Logo
